<template>
  <div class="charts-container">
    <div class="top-section">
      <div class="chart-box left-box">
        <div ref="barChart" class="chart"></div>
        <button @click="downloadImage('barChart')">下载柱状图</button>
      </div>
      <div class="chart-box right-box">
        <div ref="pieChart" class="chart"></div>
        <button @click="downloadImage('pieChart')">下载饼状图</button>
      </div>
    </div>
    <div class="bottom-section">
      <div class="chart-box-bg line-box">
        <div ref="lineChart" class="chart"></div>
        <button @click="downloadImage('lineChart')">下载折线图</button>
      </div>
    </div>
  </div>
</template>

<script>
import jsCookie from "jscookie";
import * as echarts from '/node_modules/.vite/deps/echarts.js?v=556690de';
import request from '@/utils/request';
import {getData1, getData2, getData3} from "@/api/analyze.js";
import {removeDept} from "@/api/dept.js";
export default {
  mounted() {
    let token = jsCookie.get("token");
    this.initCharts1(token);
    this.initCharts2(token);
    this.initCharts3(token);
  },
  methods: {
    async initCharts1(token) {
      const response = await getData1(token);
      // 初始化柱状图
      this.barChart = echarts.init(this.$refs.barChart);
      this.barChart.setOption({
        title: {text: '药品库存分析'},
        tooltip: {},
        xAxis: {data: response.data.names},
        yAxis: {},
        series: [{name: '数量', type: 'bar', data: response.data.values}]
      });
    },
    async initCharts2(token) {
      const response = await getData2(token);
      console.log(response.data);
      // 初始化饼状图
      this.pieChart = echarts.init(this.$refs.pieChart);
      this.pieChart.setOption({
        title: {text: '患者性别分析'},
        tooltip: {trigger: 'item'},
        series: [{
          name: '人数',
          type: 'pie',
          radius: '50%',
          data: response.data

        }]
      });
    },
    async initCharts3(token) {
      const response = await getData3(token);
      console.log(response.data);
      // 初始化折线图
      this.lineChart = echarts.init(this.$refs.lineChart);
      this.lineChart.setOption({
        title: {text: '收费趋势'},
        tooltip: {trigger: 'axis'},
        xAxis: {type: 'category', data: response.data.names},
        yAxis: {type: 'value'},
        series: [{data: response.data.values, type: 'line'}]
      });
    },

    downloadImage(chartName) {
      let chart;
      if (chartName === 'barChart') {
        chart = this.barChart;
      } else if (chartName === 'pieChart') {
        chart = this.pieChart;
      } else if (chartName === 'lineChart') {
        chart = this.lineChart;
      }

      if (chart) {
        const image = chart.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' });
        const link = document.createElement('a');
        link.href = image;
        link.download = `${chartName}.png`;
        link.click();
      }
    }
  }
};
</script>

<style scoped>
.charts-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 570px
}

.top-section {
  display: flex;
  justify-content: space-between;
}

.bottom-section {
  margin-top: 20px;
}

.chart-box {
  width: 48%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.chart-box-bg {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.chart {
  width: 100%;
  height: 300px;
}

button {
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
